<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-用户中心</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div id="app">
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">
				<div class="user_link fl">
					<span>|</span>
					<a href="user_center_info.html">用户中心</a>
					<span>|</span>
					<a href="cart.html">我的购物车</a>
					<span>|</span>
					<a href="user_center_order.html">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="index.html" class="logo fl"><img src="images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;用户中心</div>

	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="user_center_info.html">· 个人信息</a></li>
				<li><a href="user_center_order.html" class="active">· 全部订单</a></li>
				<li><a href="user_center_site.html" >· 收货地址</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<h3 class="common_title2">全部订单</h3>

				<div>
				<table class="order_list_table w980" v-if="OrderList.length > 0">
					<ul class="order_list_th w978 clearfix" >
						<li class="col01">日期: {{OrderList[page-1].odate}}</li>
						<li class="col02">订单号：{{OrderList[page-1].ono}}</li>
						<li class="col02 stress" v-if="OrderList[page-1].invoice == 0">未支付</li>
						<li class="col02 stress" v-else>已支付</li>
					</ul>
					<tbody>
						<tr>
							<td width="55%">
								<ul class="order_goods_list clearfix" v-for="item in OderitemList">
									<li class="col01"><img :src="'./'+item.pics"></li>
									<li class="col02">{{item.gname}}<em>{{item.weight}}/{{item.unit}}</em></li>
									<li class="col03">{{item.nums}}</li>
									<li class="col04">{{item.price}}元</li>
								</ul>
<!--								<option value="1">未发货</option>-->
<!--								<option value="2">已发货</option>-->
<!--								<option value="3">已到达</option>-->
							</td>
							<td width="15%" v-if="OrderList[page-1].invoice == 0">待付款</td>
							<td width="15%" v-else>已付款</td>
							<td width="15%" v-if="OrderList[page-1].invoice == 0"><a href="#" class="oper_btn" @click.prevent="gotopay(OrderList[page-1].price,OrderList[page-1].ono)">去付款</a></td>
							<td width="15%" v-else-if="OrderList[page-1].status==1"><a href="#" class="oper_btn">出货中</a></td>
							<td width="15%" v-else-if="OrderList[page-1].status==2"><a href="#" class="oper_btn">已发货</a></td>
							<td width="15%" v-else><a href="#" class="oper_btn">已送达</a></td>
						</tr>
					</tbody>
				</table>
				</div>

				<div class="pagenation">
					<a @click.prevent="clickPage(1)">第一页</a>
					<a @click.prevent="clickPage(page-1)" >&lt;上一页</a>
					<a @click.prevent="clickPage(page+1)">下一页></a>
					<a @click.prevent="clickPage(OrderList.length)" >最后一页</a>
				</div>
				<b>总共{{total}}条记录、共分为{{OrderList.length}}页，
				当前第{{page}}页</b>
		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
</div>
<!--  注意引入顺序 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/slide.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="js/qs.js"></script>
<script>
	Vue.prototype.axios = axios;
	axios.interceptors.request.use(config => {
				const token = localStorage.getItem('token');
				if (token) {
					config.headers.Authorization = token;
				} else {
					config.headers.Authorization = '';
				}
				console.log(token);
				console.log(config);
				return config;
			}, error => {
				return Promise.reject(error);
			}
	);
	axios.defaults.headers.post['Content-Type'] = 'application/json';
	let begin ="http://localhost:20001/";
	let security = "freshgood-security/";
	let goods = "freshgood-goods/";
	let cart = "freshgood-cart/";
	let order = "freshgood-order/"
	var vm = new Vue({
		el:"#app",
		data:{
			OrderList:[],
			OderitemList:[],
			total:0,
			page:1,
			totalPage:1,
		},
		methods:{
			showAllOrder:function () {
				return axios.post(begin+order+"order/findBymno");
			},
			showPageOderItem:function(){
				return axios({
					url: begin+order+"order/findByono",
					method:"get",
					params :{page:this.page-1,}
				});
			},
			selectLogin(){
				return axios.post(begin+security+"security/freshgood/loginCheck")
			},
			clickPage:function (pageno) {
				if(this.totalPage>=pageno && pageno>0){
					this.page=pageno;
					this.showPageOderItem().then(rs=>{
						this.OderitemList=rs.data;
					});
				}
			},
			gotopay(price,ono){
				let orderitem='';
				axios({
					url:begin+security+"member/updateOrder",
					method:"get",
					params: {
					ono:ono,
					ano:this.OrderList[this.page-1].ano,}
				}).then(data => {})
				for(let i=0;i<this.OderitemList.length;i++){
					orderitem+=this.OderitemList[i].gname+"*"+this.OderitemList[i].nums+","
				}
				sessionStorage.setItem('orderitem',orderitem);
				sessionStorage.setItem('orderPrice',price);
				window.open('alipay.jsp', '_blank');
				location.href="user_center_order.html";
			}
		},
		created(){

		},
		mounted:function () {
			axios.all([this.selectLogin(),this.showAllOrder()])
					.then(axios.spread((rs1, rs2)=>{
						if(rs1.data.code!==1){
							alert(rs1.data.msg);
							location.href="login.html";
						}
						this.OrderList=rs2.data.OrderList;
						this.total=rs2.data.total;
						this.OderitemList=rs2.data.OderitemList;
						this.totalPage=rs2.data.OrderList.length;
			}));
		}
	});

</script>
</body>
</html>